frappe.pages['price-comparison'].on_page_load = function(wrapper) {
	var page = frappe.ui.make_app_page({
		parent: wrapper,
		title: 'Price Comparison ',
		single_column: true
	});

	page.set_title('比价');

	page.set_indicator('Finish', 'green');

	let $btn_one = page.set_primary_action('选询价单', function() {frappe.msgprint('请选择询价单')})

	let $btn_two = page.set_secondary_action('Refresh', 
	//use regular ajax api methods to fetch document data, then refresh
	() => frappe.db.get_list("SRM Material", 
				{fields: ['material_number', 'material_name', 'material_model']}
			).then((r) => { 
				let data = r.map(Object.values)
				datatable1.refresh(data, columns1) 
			})
		)

	page.add_menu_item('Confirm', () => frappe.msgprint("确认完成"));

	page.add_action_item('Cancel', () => frappe.msgprint('取消完成'));

	let field1 = page.add_field({
		label: __('Start Date'),
		fieldtype: 'Date',
		fieldname: 'start_date'
	});

	let field2 = page.add_field({
		label: __('End Date'),
		fieldtype: 'Date',
		fieldname: 'end_date'
	});

	let field = page.add_field({
		label: 'Status',
		fieldtype: 'Select',
		fieldname: 'status',
		options: [
			'Open',
			'Closed',
			'Cancelled'
		],
		change() {
			console.log(field.get_value());
		}
	});


	$("<div id='chuhuo' style='margin-top:20px'><div>出货明细</div><div class='datatable'></div></div>").appendTo('.layout-main-section');
	let el1 = document.querySelector('#chuhuo');
	// let el2 = document.querySelector('.layout-main-section')
	let button_formatter = (value,rowData) => {
		// console.log(value);
		// console.log(rowData[1]);
		return `<button onclick="frappe.msgprint('This is ${rowData[1].content}')">Action!</button>`;
	}
	let columns1 = [{name:'Number', editable: false}, 'Name', 'Model', 
		{name: "Action Button", focusable: false, format: button_formatter }]
	let datatable1 = new frappe.DataTable(el1, { columns: columns1, data: [], layout: "fluid", inlineFilters: true });



	
	$("<div id='tuihuo' style='margin-top:20px'><p>退货明细</p><div class='datatable'></div></div>").appendTo('.layout-main-section');
	let el2 = document.querySelector('#tuihuo');
	// button_formatter = (value) => {return `<button onclick="frappe.msgprint('This is ${value}')">Action!</button>`}
	// let columns2 = [{name:'物料', width: 3}, {name:'规格型号', width: 3}, {name:'送货单', width: 3}, {name:'订单:行号', width: 3},
	// {name:'单位', width: 1},{name:'送货数量', width: 1},{name:'送货金额', width: 1},
	// {name:'验退数量', width: 1},{name:'验退金额', width: 1},{name:'入库数量', width: 1},
	// {name:'入库金额', width: 1},{name:'对帐数量', width: 1},{name:'对帐金额', width: 1}, 
	// {name: "操作", width: 1, focusable: false, format: button_formatter }]
	let columns2 = [{name:'物料', width: 3}, {name:'送货单', width: 3}, {name:'订单:行号', width: 3},
	{name:'单位', width: 1},{name:'送货数量:金额', width: 2},
	{name:'验退数量:金额', width: 2},{name:'入库:金额', width: 2},
	{name:'对帐数量', width: 2},{name:'对帐金额', width: 2}, 
	{name: "操作", width: 1, focusable: false, format: button_formatter }]
	let datatable2 = new frappe.DataTable(el2, { columns: columns2, data: [], layout: "ratio"});

	//use regular ajax api methods to fetch document data, then refresh
	frappe.call({
		method: 'srm.srm.doctype.srm_payment.srm_payment.get_data_chuhuo',
		callback: (r) => {
			// on success
			// console.log(r.message);
			let data = r.message.map(Object.values)
			datatable2.refresh(data, columns2)
		},
		error: (r) => {
			// on error
		}
	})
}